<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="/static/css/metro-all.min.css">
	<link rel="stylesheet" href="/static/css/schemes/darcula.min.css">
</head>
<body class="bg-dack m-0 p-2">
	<!--  -->
	<header class="grid">
		<div class="row mt-10">
			<div class="cell-12">
				<div data-role="appbar" data-expand-point="md">
					<a href="#" class="brand no-hover"> dreamcc</a>
					<ul class="app-bar-menu">
						<li><a href="#">首页</a></li>
						<li>
							<a href="#" class="dropdown-toggle">测试</a>
							<ul class="d-menu" data-role="dropdown">
								<li><a href="#">二级</a></li>
								<li><a href="#">菜单</a></li>
								<li><a href="#">展示</a></li>
							</ul>
						</li>
						<li><a href="#">文章</a></li>
						<li><a href="#">用户</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="row mt-10">
			<div class="cell-12">
				<h4>权限添加</h4>
			</div>
		</div>
	</header>
	<!--  -->
	<section>
		<article class="grid text-left">
		<form data-role="validator" action="javascript:" data-on-validate-form="_submitForm">
		<div class="row">
			<div class="cell-12">
				<select data-role="select" id="rules" name="power" data-validate="required" data-on-down="updateSelect">
				</select>
				<span class="invalid_feedback text-left">
				必须选择
				</span>
			</div>
		</div>
		<div class="row">
			<div class="cell-12">
				<input type="text" data-role="input" placeholder="新的权限名称" name="name"  
					data-prepend="<span class='mif-bookmark'></span>"
					data-clear-button="false"
					data-validate="required minlength=2 maxlength=24">
				<span class="invalid_feedback text-left">
				必填 5到24个字符
				</span>
			</div>
		</div>
		<div class="row mt-2">
			<div class="cell-12">
				<input type="text" data-role="input" placeholder="控制器以及方法路由" name="route"  
					data-prepend="<span class='mif-bookmark'></span>"
					data-clear-button="false"
					data-validate="required minlength=2 maxlength=24">
				<span class="invalid_feedback text-left">
				必填 2到24个字符
				</span>
			</div>
		</div>
		<div class="row">
			<div class="cell-12">
				<div class="row">
					<div class="cell-7">
						<input data-role="slider" data-target="#slider" data-accuracy="1" id="#slider-1" data-hint-always="true" data-hint-position="right" >
					</div>
					<div class="cell"></div>
					<div class="cell-4">
						<input type="text" data-role="input" id="slider" name="rank" data-validate="required" 		data-clear-button="false" value="0"  readonly="readonly">
					</div>
				</div>
				<span class="invalid_feedback text-left">
				必填 2到24个字符
				</span>
			</div>
		</div>
		<div class="row mt-2">
			<div class="cell-12">
				<div class="border border-size-1" style="border-color:#585b5d;">
					<span class='mif-eye mr-2' style="display:block; float:left;background-color:#585b5d;padding:6px 12px 7px 12px;"></span>
					<input type="radio" name="show" data-role="radio" value="0" data-validate="required" data-caption="显示权限">
					<input type="radio" name="show" data-role="radio" value="1" data-validate="required" data-caption="隐藏权限">
					<span class="invalid_feedback">显示状态不能为空</span>
				</div>
			</div>
		</div>
		<div class="row mt-2">
			<div class="cell-12">
				<textarea data-role="textarea" data-auto-size="false"  placeholder="对新权限进行一定的描述" data-prepend="<span class='mif-leanpub'></span>" data-chars-counter="#chars-counter" data-chars-counter-template="您已经输入了 $1 个字符" data-validate="required minlength=2 maxlength=255" style="height:96px;outline:none;" name="introduce"></textarea>
				<span class="invalid_feedback text-left">
				必填 2到255个字符
				</span>
				<p id="chars-counter"></p>
				
			</div>
		</div>
		<div class="row mt-2">
			<div class="cell-12">
				<button class="button w-100">确认</button>
			</div>
		</div>
		</form>
		</article>
	</section>
	<!--  -->
	<footer class="grid text-center">
		
	</footer>
</body>
<foot>
	<div class="bottom-nav pos-absolute">
		<button class="button">
			<span class="icon mif-home"></span>
			<span class="label">首页</span>
		</button>

	    <button class="button" onclick="indexrulseurl()">
			<span class="icon mif-power" ></span>
			<span class="label">规则</span>
		</button>
		<button class="button" onclick="listrulseurl()">
			<span class="icon mif-list"></span>
			<span class="label">列表</span>
		</button>
		<button class="button" onclick="addRulesurl()">
			<span class="icon mif-plus"></span>
			<span class="label">添加</span>
		</button>
		<button class="button">
			<span class="icon mif-user"></span>
			<span class="label">我的</span>
		</button>
	</div>
	<script src="/static/js/jquery-3.3.1.min.js"></script>
	<script src="/static/js/metro.js"></script>
	<script>

	function listrulseurl()
	{
		Metro.toast.create('请稍后', function(){
			window.location.href = 'http://www.dreamcc.com/admin/admin_rules/list';
		},1000); 
	}
	function addRulesurl()
	{
		Metro.toast.create('请稍后', function(){
			window.location.href = 'http://www.dreamcc.com/admin/admin_rules/add';
		},1000); 
	}
	function indexrulseurl()
	{
		Metro.toast.create('请稍后', function(){
			window.location.href = 'http://www.dreamcc.com/admin/admin_rules/list';
		},1000); 
	}
	function rulesshow()
	{
		var url = 'http://www.dreamcc.com/admin/admin_rules/rulesSelect.html';
		$.post(url,'',function(res)
		{
			if (0 === res.code)
			{
				var select = $("#rules").data("select");
				data = selectAccsee(res.data);
				select.data(data);
			}
			else
			{
				var select = $("#rules").data("select")
				select.data('<option value="0">顶级权限</option>');
			}
		});
	}
	function selectAccsee(select)
	{
		var str = '<option value="0">顶级权限</option>';
		for(var key in select)
		{
			str += '<option value="'+key+'">'+select[key]+'</option>';
		}
		return str;
	}
	rulesshow();
	
	function _submitForm()
	{
		var url = 'http://www.dreamcc.com/admin/admin_rules/addRules.html';
		var data = $("form").serializeArray();
		$.post(url,data,function(res)
		{
			if (0 === res.code) Metro.toast.create('修改成功',null,3000);
			else Metro.toast.create('修改失败', null,3000);
		});
	}
	</script>
</foot>
</html>

